<template>
    <div class="maxBox colorFFF">
        <headers class="headers"></headers>
        <div class="marginTop100 publicWidth">
            <el-row :gutter="20">
                <el-col :span="8">
                    <div class="walletBox">
                        <div class="colorFFF">我的总{{$store.state.config.coin_name}}</div>
                        <div class="size32 colorFFF marginTop20">
                            {{ (parseFloat(user_info.balance) + parseFloat(user_info.withdraw_balance)) | formatBlance }}</div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div @click="onJump('/wallet/withdrawal')" class="walletBox2 hand">
                        <div class="colorFFF">
                            可提现{{$store.state.config.coin_name}}
                        

                            <el-popover placement="bottom-start" width="300" trigger="hover">
                            <div>
                                {{$store.state.config.coin_name}}来源分为收益来源和充值来源，收益部分的{{$store.state.config.coin_name}}是可以提现的，充值部分的{{$store.state.config.coin_name}}只能用于平台消费，不可用于提现。
                            </div>
                            <div>
                                <ul>
                                    <li>提现金额到账{{instructions.withdraw_rate}}%，需要扣除{{100 - instructions.withdraw_rate}}%手续费</li>
                                    <li>每充值1元人民币能获得{{instructions.balance_rate}}个{{$store.state.config.coin_name}}</li>
                                    <li>每次最少提现{{instructions.min_withdraw}}{{$store.state.config.coin_name}}</li>
                                    <li>每次最多提现{{instructions.max_withdraw}}{{$store.state.config.coin_name}}</li>
                                </ul>
                            </div>
                                <el-button slot="reference"
                                    style="background-color:rgba(0, 0, 0, 0);border: none;padding: 0;">
                                    <i class="el-icon-warning-outline hand colorFFF"></i>
                                </el-button>
                            </el-popover>
                        </div>
                        <div class="size32 colorFFF marginTop20">{{ user_info.withdraw_balance | formatBlance }}</div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div @click="onJump('/wallet/recharge')" class="walletBox3 hand">
                        <div class="flexFS" style="width: 130px;margin: 25px auto;">
                            <img alt src="@/assets/wallet/Frame@2x.png" srcset style="width: 30px;" />
                            <div class="colorFFF size25">{{$store.state.config.coin_name}}充值</div>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>

        <div class="colorFFF marginTop30 flexSB publicWidth">
            <div>收支明细</div>
            <div class="block">
                <el-date-picker @change="chooseTime" end-placeholder="结束日期" range-separator="至" size="small"
                    start-placeholder="开始日期" style="margin-right: 20px;" type="datetimerange" v-model="times"
                    value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
                <span @click="search" class="demonstration cursor-pointer">查询</span>
            </div>
        </div>

        <div class="publicWidth">
            <div class="data-window" v-if="data.length > 0">
                <el-table :data="data" class="marginTop30" max-height="440px" size="small" style="width: 100%"
                    v-loadmore="loadMoreData">
                    <el-table-column label="事由" prop="data">
                        <template slot-scope="scope">
                            <div class="flexFS">
                                <img :src="scope.row.icon" alt srcset style="width: 20px;" />
                                <div class style="margin-left: 10px;">{{ transType[scope.row.type] }}</div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="类型" prop="way" sortable>
                        <template slot-scope="scope">{{ transAction[scope.row.action] }}</template>
                    </el-table-column>
                    <el-table-column label="时间" prop="created_at" sortable></el-table-column>
                    <el-table-column label="备注" prop="desc"></el-table-column>
                    <el-table-column label="金额" prop="amount" width="70px">
                        <template slot-scope="scope">
                            <div class="color-pink" v-if="scope.row.amount >= 0">+{{ scope.row.amount }}</div>
                            <div class="color-666" v-else>{{ scope.row.amount }}</div>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="text-center font-15 color-999 mt-10" v-if="append_loading">加载中...</div>
                <div class="text-center font-15 color-999 mt-10" v-if="data.length >= total">~没有更多了~</div>
            </div>
            <div v-else>
                <el-empty :image="empty_image"></el-empty>
            </div>
        </div>
    </div>
</template>

<script>
import pageTool from '@/mixins/page'
import headers from '@/Layout/headers/index'
export default {
    components:{
        headers
    },
    data() {
        return {
            query: {
                size: 12,
            },
            times: [],
            transAction: {
                profit: '收益',
                expend: '支出',
                refund: '退款',
                recharge: '充值',
                withdraw: '提现',
            },
            transType: {
                rebate: '返利',
                gift: '直播礼物',
                tipping: '作品打赏',
                customized: '私人订制',
                one_by_one: '1V1密聊',
                same_city: '同城空降',
                long: '付费查看长视频',
                short: '付费查看短视频',
                recharge: '余额充值',
                withdraw: '提现',
                invite_rebate: '邀请返利',
                live: '付费直播间',
                system: '系统',
            },
            instructions:{},
            empty_image: require('@/assets/image/empty.png'),
        }
    },
    mixins: [pageTool],
    directives: {
        loadmore: {
            bind(el, binding) {
                const selectWrap = el.querySelector('.el-table__body-wrapper')
                selectWrap.addEventListener('scroll', function () {
                    const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
                    if (scrollDistance <= 0.5) {
                        binding.value() //执行在使用时绑定的函数，在这里即addData方法
                    }
                })
            },
        },
    },
    mounted() {
        this.beforeInit()
        this.getWithdrawalInstructions()
    },
    methods: {
        beforeInit() {
            this.url = '/money-log/index'
            this.append = true
            this.init() //重新请求数据
        },
        getWithdrawalInstructions() {
            let that = this
            this.$request.get('/withdraw/rate_info')
                .then((res) => {
           that.instructions = res
           console.log('that.instructions',that.instructions)
                })
     
        },
        search() {
            this.page = 1
            this.data = []
            this.init()
        },
        onJump(url) {
            this.$router.push(url)
        },
        chooseTime(value) {
            if (!value) {
                delete this.query.start_time
                delete this.query.end_time
                return false
            }
            this.query.start_time = value[0]
            this.query.end_time = value[1]
        },
        loadMoreData() {
            this.page++
            this.init()
        },
    },
    computed: {
        user_info() {
            return this.$store.state.user.user
        },
    },
}
</script>

<style lang="scss" scoped>

.maxBox{
    width: 100Vw;
    height: 100vh;
    background-color: #060316;
    overflow: auto;
}
.walletBox {
    background: linear-gradient(180deg, #ff5f98 0%, #ff1c6d 100%);
    border-radius: 10px 10px 10px 10px;
    opacity: 1;
    background-image: url('@/assets/wallet/Group 1190@2x.png');
    background-repeat: no-repeat;
    background-size: cover;
    padding: 20px;
    height: 82px;
}

.walletBox2 {
    padding: 20px;
    height: 82px;
    background: linear-gradient(180deg, #ff5f98 0%, #ff1c6d 100%);
    border-radius: 10px 10px 10px 10px;
    opacity: 1;
    background-image: url('@/assets/wallet/Group 1191@2x.png');
    background-repeat: no-repeat;
    background-size: cover;
}

.walletBox3 {
    padding: 20px;
    height: 82px;
    background: linear-gradient(180deg, #ff5f98 0%, #ff1c6d 100%);
    border-radius: 10px 10px 10px 10px;
    opacity: 1;
    background-image: url('@/assets/wallet/Group 1192@2x.png');
    background-repeat: no-repeat;
    background-size: cover;
}</style>